<!-- 发起实习评价页面 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew title="发起实习评价" :showBack="true"></pageHeaderNew>
    </template>
    <div class="main">
      <div class="hear">
        <a-steps changeable :current="current" @change="setCurrent">
          <a-step description="">评价基础信息 </a-step>
          <a-step description="">编辑评价方案内容 </a-step>
          <a-step description="">设置评价流程 </a-step>
          <a-step description="">确认发起 </a-step>
        </a-steps>
      </div>
      <div class="business" v-show="current === 1">
        <a-form
          ref="formRef"
          :model="form"
          auto-label-width
          :style="{ width: '600px', margin: 'auto' }"
        >
          <a-form-item field="personnel" label="被评价人" required show-colon>
            <a-input v-model="form.personnel" />
          </a-form-item>
          <a-form-item
            field="procedure"
            label="评价方案名称"
            required
            show-colon
          >
            <a-input v-model="form.procedure" placeholder="请输入" />
          </a-form-item>
          <a-form-item
            required
            field="templateId"
            label="选择实习评价模板"
            show-colon
          >
            <a-select
              @change="templatechange"
              :options="SelectOption"
              v-model="form.templateId"
              :style="{ width: '320px' }"
            >
            </a-select>
          </a-form-item>
          <a-form-item label="评价描述" show-colon>
            <a-textarea
              v-model="form.procedureRemark"
              placeholder="Please enter something"
              style="height: 200px"
              allow-clear
            />
          </a-form-item>
        </a-form>
      </div>
      <div v-show="current === 2">
        <a-layout class="layout">
          <a-layout-header class="header">
            <div>
              <span></span>
              基础信息
            </div>
            <a-button @click="visible = true" type="primary">
              <template #icon>
                <icon-edit />
              </template>
              <template #default>编辑</template></a-button
            >
          </a-layout-header>
          <a-layout-content class="main">
            <div style="display: flex; justify-content: center">
              <div class="cn">
                <div
                  class="cn-main"
                  v-for="item in form.controls"
                  :key="item.ctlCode"
                >
                  <span>{{ item.ctlCnName + ':' }}</span>
                  <a-input class="cn-input" disabled placeholder="自动获取" />
                </div>
              </div>
            </div>
          </a-layout-content>
        </a-layout>
        <a-layout class="layout">
          <a-layout-header class="header">
            <div>
              <span></span>
              入职手续清单
            </div>
            <a-button @click="visibleEvent = true" type="primary"
              >新增</a-button
            >
          </a-layout-header>
          <a-layout-content class="main">
            <a-table
              :data="fromss"
              :span-method="dataSpanMethod"
              :bordered="{
                wrapper: true,
                cell: true,
                headerCell: true,
                bodyCell: true
              }"
              stripe
            >
              <template #columns>
                <a-table-column
                  align="center"
                  title="办理环节"
                  dataIndex="node"
                  :width="200"
                >
                </a-table-column>
                <a-table-column
                  :width="200"
                  dataIndex="content"
                  align="center"
                  title="办理事项"
                ></a-table-column>
                <a-table-column
                  :width="200"
                  dataIndex="demand"
                  align="center"
                  title="办理事项要求"
                ></a-table-column>
                <a-table-column
                  :width="200"
                  dataIndex="department"
                  align="center"
                  title="办理部门"
                >
                  <template #cell>
                    <a-select :style="{ width: '100px' }"> </a-select>
                  </template>
                </a-table-column>
                <a-table-column
                  :width="200"
                  dataIndex="person"
                  align="center"
                  title="办理人"
                >
                  <template #cell>
                    <a-select :style="{ width: '100px' }"> </a-select>
                  </template>
                </a-table-column>
                <a-table-column
                  :width="200"
                  dataIndex="phone"
                  align="center"
                  title="办理人联系方式"
                >
                  <template #cell>
                    <a-select :style="{ width: '100px' }"> </a-select>
                  </template>
                </a-table-column>
                <a-table-column
                  :width="200"
                  dataIndex="space"
                  align="center"
                  title="办理地点"
                >
                  <template #cell>
                    <a-select :style="{ width: '100px' }"> </a-select>
                  </template>
                </a-table-column>
                <a-table-column
                  title="操作"
                  dataIndex="operation"
                  align="center"
                  :width="120"
                  fixed="right"
                >
                  <template #cell="{ record, rowIndex }">
                    <a-tooltip content="编辑">
                      <icon-font
                        @click="edit(record)"
                        type="icon-edit"
                        :size="26"
                        :style="{
                          marginRight: '10px',
                          cursor: 'pointer'
                        }"
                      />
                    </a-tooltip>
                    <a-tooltip content="删除" position="left">
                      <a-popconfirm
                        content="是否确认删除该条数据?"
                        @ok="del(record, rowIndex)"
                      >
                        <icon-font
                          type="icon-delete"
                          :size="26"
                          :style="{
                            cursor: 'pointer',
                            marginRight: '10px'
                          }"
                        />
                      </a-popconfirm>
                    </a-tooltip>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </a-layout-content>
        </a-layout>
      </div>
    </div>
    <div class="btn">
      <a-button v-show="current !== 1" @click="current = --current"
        >上一步</a-button
      >
      <a-button
        type="primary"
        v-show="current === 1 || current === 2"
        @click="next"
        >下一步</a-button
      >
      <a-button v-show="current === 1" @click="current = 3"
        >跳到评价流程</a-button
      >
      <a-button type="primary" v-show="current === 4" @click="submit"
        >直接发起</a-button
      >
      <a-button v-show="current === 4" @click="submit" type="primary"
        >系统直接发起</a-button
      >
      <a-button v-show="current === 3 || current === 4" @click="current = 1"
        >跳到基本信息</a-button
      >
    </div>
  </ContentCard>
  <a-drawer
    :width="500"
    :visible="visible"
    @ok="handleOk"
    @cancel="visible = false"
    unmountOnClose
  >
    <template #title> 基础信息 </template>
    <div v-for="item in secondsShow" :key="item.ctlCode">
      <p>{{ item.name }}</p>
      <a-table
        :data="item.componentModel"
        @change="handleChange"
        :draggable="{ type: 'handle', width: 40 }"
        stripe
      >
        <template #columns>
          <a-table-column align="center" :width="200">
            <template #title> 字段名称 </template>
            <template #cell="{ record }">
              {{ record.ctlCnName }}
            </template>
          </a-table-column>
          <a-table-column align="center" :width="80">
            <template #title> 是否显示 </template>
            <template #cell="{ record }">
              <a-checkbox v-model="record.isShow"></a-checkbox>
            </template>
          </a-table-column>
          <!-- <a-table-column align="center" :width="80">
            <template #title> 是否必填 </template>
            <template #cell="{ record }">
              <a-checkbox v-model="record.isRequired"></a-checkbox>
            </template>
          </a-table-column> -->
        </template>
      </a-table>
    </div>
  </a-drawer>
  <!-- <eventFrom
    @updateFromData="updateFromData"
    @updateFromDataOne="updateFromDataOne"
    v-model:visible="visibleEvent"
  /> -->
</template>
<script setup lang="ts">
// import eventFrom from './eventFrom';
import clonedeep from 'lodash.clonedeep';
import {
  GetEntryScheme,
  GetEntrySchemeById,
  GetSchemePeople,
  GetOnboardingProcedure,
  GetOnboardingProcedureById
} from '@/apis/management/personnel/baseSetting/TransactionSetting';
import { useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';
const visibleEvent = ref(false);
const router = useRouter();
const onboardingId = router.currentRoute.value.query.id;
const current = ref(1);
const setCurrent = (index: number) => {
  current.value = index;
};
const form = reactive({
  name: '',
  remark: '',
  onboardingId: onboardingId,
  procedure: '',
  procedureRemark: '',
  personnel: '',
  controls: [],
  details: [],
  templateId: undefined
});
const next = async () => {
  console.log(form);
  if (current.value === 1) {
    if (await formRef.value.validate()) {
      return Message.error('请填写必填项');
    }
  }

  current.value++;
};
const formRef = ref();
const from: any = ref([]);
const editfromData = ref();
// 表格合并
const dataSpanMethod = (datas: any) => {
  const { record, rowIndex, columnIndex, column } = datas;
  // 处理rowSpan
  const obj = {
    rowspan: 2,
    colspan: 0
  };
  // 当检索到相同数据则返回 那条数据
  let arr = fromss.value.filter((res: any) => {
    return res.node == record.node;
  });
  if (
    fromss.value[rowIndex - 1]?.node != record.node &&
    (column.dataIndex === 'node' ||
      column.dataIndex === 'department' ||
      column.dataIndex === 'person' ||
      column.dataIndex === 'space' ||
      column.dataIndex === 'phone' ||
      column.dataIndex === 'operation')
  ) {
    // 匹配到相同数据的长度
    obj.rowspan = arr.length;
  } else {
    // 如果上一行的数据与当前的数据相同，就将rowSpan变为0
    obj.rowspan = 0;
  }
  return obj;
};

//入职手续表单数据
const fromss = computed(() => {
  console.log('fromData.data', form);
  const newData = clonedeep(form.details);
  if (newData.length !== 0) {
    const newArr: any = [];
    newData?.forEach((ele: any) => {
      ele.demands.forEach((item: any) => {
        item.node = ele.node;
        item.space = ele.space;
        item.department = ele.department;
        item.person = ele.person;
        item.phone = ele.phone;
        item.demands = clonedeep(ele.demands);
        newArr.push(clonedeep(item));
      });
    });
    return newArr;
  } else {
    return [];
  }
});

const templatechange = async (e: number) => {
  const res: any = await GetOnboardingProcedureById({ id: e });
  console.log(res);
  form.controls = res.controls;
  form.details = res.details;
};
const visible = ref(false);
const init = async () => {
  const res: any = await GetOnboardingProcedure({ page: 1, size: 100 });
  console.log(res.content);
  res.content.forEach((ele: any) => {
    SelectOption.push({ value: ele.id, label: ele.name });
  });
  console.log(SelectOption);
};
// 初始化默认模板
const initControlsdata = async () => {
  const res: any = await GetEntryScheme({ required: 1 });
  seconds.value = (await GetEntrySchemeById({
    id: res.content[0].id
  })) as any[];
  console.log(11111, seconds.value);
};
initControlsdata();
const secondsShow = computed(() => {
  if (form.controls.length === 0) {
    return [...seconds.value].splice(0, 2);
  } else {
    let controls: string[] = [];
    form.controls.forEach((ele: any) => {
      controls.push(ele.ctlCode);
    });
    let newArr = clonedeep([...seconds.value]);
    newArr.forEach((ele: any) => {
      ele.componentModel.forEach((item: any) => {
        if (controls.indexOf(item.ctlCode) !== -1) {
          console.log(1, item);
          item.isShow = true;
        }
      });
    });
    return newArr;
  }
});

const handleOk = () => {
  const newArr: any = [];
  secondsShow.value.forEach((ele: any) => {
    ele.componentModel.forEach((item: any) => {
      if (item.isShow) newArr.push(item);
    });
  });
  form.controls = newArr;
  console.log(33, newArr);
  visible.value = false;
};

const del = (data: number, inds: number) => {
  let index = 0;
  form.details.forEach((ele, ind) => {
    if (ele.id === data.id) {
      index = ind;
    }
  });
  form.details.splice(index, 1);
  console.log('datadata', form.details, data);
};

const edit = (data: any) => {
  console.log('data11111', data);
  visibleEvent.value = true;
  const newData = clonedeep(data);
  newData.edit = true;
  editfromData.value = newData;
};
const updateFromData = (e: any) => {
  console.log('e', e);
  form.details.push(e);
};
const updateFromDataOne = (e: any) => {
  console.log('e', e);
  // console.log(fromData.data);
  let index = 0;
  form.details.forEach((ele: any, ind: number) => {
    if (ele.id === e.id) {
      index = ind;
      ele = clonedeep(e);
      console.log('ele', ele);
    }
  });
  form.details[index] = e;
  // fromData.data.push(e);
  // emit('updateMaterialData', clonedeep(e));
};
const seconds = ref();
const SelectOption: any = reactive([]);
const controlsData: any = reactive([]);
init();
</script>
<style lang="less" scoped>
.main {
  width: 80%;
  margin: auto;
  .hear {
    width: 60%;
    padding: 20px;
    margin: auto;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
  }
  .business {
    width: 100%;
    margin: auto;
  }
}
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  border-top: 2px solid #f8f8f8;
  box-shadow: 0px -6px 2px rgb(0 0 0 / 2%);
}
:deep(.arco-btn) {
  margin-right: 20px;

  width: 120px;
}
.layout {
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    background-color: #f3f8fe;
    border-radius: 4px;
    margin-bottom: 20px;
    div {
      display: flex;
      align-items: center;

      span {
        margin: 0 20px;
        display: inline-block;
        width: 5px;
        height: 30px;
        background-color: #165dff;
      }
    }
  }
  .main {
    padding: 0 40px 20px 40px;
    .cn {
      width: 85%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .cn-main {
        display: flex;
        width: 45%;
        margin-bottom: 20px;
        align-items: center;
        span {
          width: 100px;
          text-align: end;
          margin-right: 20px;
        }

        .cn-input {
          flex: 1;
        }
      }
    }
  }
  .arco-upload-wrapper {
    flex: 0;
  }
}
</style>
